<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<title>${name_china}管理列表</title>
<%@include file="/common/head.jsp" %>
<script src="<%=request.getContextPath()%>/static/layDate-v5.0.9/laydate/laydate.js"></script>
<style>
.maskback{
	position:fixed;
	width:100%;
	height:100%;
	top:0px;
	background:rgba(0,0,0,0.7);
}
.mainback{
    width: 40%;
    height: 500px;
    background: #fff;
    margin: 0 auto;
    margin-top: 17%;
}
</style>
</head>
<body class="iframe-page">
<div class="page-title-wrapper">
    <div class="page-title">
        <div class="page-title-text">
            <span>${name_china}管理</span>
        </div>
        <div id="toolbar" style="float: right"></div>
        <a id="goBack" class="btn-return distance-left" href="javascript:;"><i class="icon icon-arrow-left"></i>返回上级</a>
    </div>
    <div class="page-title-border"></div>
</div>

<div class="search-field">
    <span class="field-cont">
        <span class="field-cont-title">类型</span>
        <input type="text" class="summer-input" id="type"/>
        <input type="hidden" id="userId" name="userId"/>
    </span>
    
    <span class="field-btn-wrapper">
        <a id="search" class="btn btn-primary btn-icon wave distance-right"><i class="icon icon-search"></i></a>
        <a id="reset" class="btn btn-icon wave wave-dark"><i class="icon icon-refresh"></i></a>
        <a id="delTime" class="btn btn-primary  wave distance-right">删除时间</a>
    </span>
</div>

<div id="t-wrap">
    <table class="summer-datagrid" id="dataList">
	    <col width="5%">
	    <col width="5%">
	    <col width="10%">
	    <col width="10%">
	    <col width="20%">
	    <col width="10%">
	    <thead>
		    <tr>
		        <th><input type="checkbox" id="addBatchAll"></th>
		        <th>类型</th>
		        <th>开始时间</th>
		        <th>结束时间</th>
		        <th>视频路径</th>
		        <th>操作</th>
		    </tr>
	    </thead>
    </table>
</div>
<form id="form" method="post">
<div style="display: none" class="maskback">
     <div class="mainback">
     	 <div class="form-cont" style="top:40px;">
     	    <input type="hidden" name="ID" id="ID"/>
	        <p class="form-cont-title"><span class="field-required">*</span>类型</p>
	        <input type="text" id="typef" name="typef" class="summer-input summer-validatebox" /> 
	     </div>
     	 <div class="form-cont" style="top:40px;">
     	    <input type="hidden" name="id" id="id"/>
	        <p class="form-cont-title"><span class="field-required">*</span>开始时间</p>
	        <input type="text" id="startTimef" name="startTimef" class="summer-input summer-validatebox" /> 
	     </div>
	     <div class="form-cont" style="top:40px;">
	        <p class="form-cont-title"><span class="field-required">*</span>结束时间</p>
	        <input type="text" id="endTimef" name="endTimef" class="summer-input summer-validatebox" /> 
	     </div>
	     <div id="video">
	     <div class="form-cont" style="top:40px;">
	        <p class="form-cont-title"><span class="field-required">*</span>视频路径</p>
	        <input type="hidden" id="videoUrlf" name="videoUrlf" class="summer-input summer-validatebox" /> 
	     </div>
	     </div>
	     <div class="form-btn-wrapper" id="funcbar" style="margin-top: 100px;">
	        <a id="save" href="javascript:;" class="btn btn-ok btn-normal  wave distance-right" >保存</a>
	        <a class="btn btn-normal" id="backBtn">关闭</a>
	     </div>
     </div>
</div>
</form>
<script>
	//请求url
	var CONST_URL = {
		GET_TIME: basePath + '${common_url}getTime',
	   	INIT_ADD: basePath + "${common_url}initAdd",
	   	INIT_EDIT: basePath + "${common_url}initEdit",
	   	INIT_VIEW: basePath + "${common_url}initView",
	   	DEL_TIME: basePath + "${common_url}delTime",
	   	INIT_MAIN: basePath + "${common_url}init",
	   	EDIT_TIME: basePath + "${common_url}editTime",
	   	INIT_TIME_EDIT: basePath + "${common_url}initTimeEdit"
	};
	
    var  permission = CommonUtil.getPermission('${name_english}');
    
    $(function () {
    	$("#userId").val(${userId});
        // 新建toobar
		$.funcbar({
			id: 'toolbar',
			type: 'toolbar',
			data: permission,
			permit: ['${name_english}:initAdd']
		});
        //勾选全部
		$('#addBatchAll').on('click',checkAll);
		 //下拉列表初始化，上传类型
    	$('#type').combobox({
   	    	async:false,
            valueField : 'code',
            textField : 'name',
            url : COMMON_URL.getCode + '?type=T_DM_T_YWYM_TIMER_TYPE'
    	});
		 
    	
        // 查询按钮
        $('#search').on('click', reloadTable);
        
        //重置按钮
        $('#reset').on('click', function () {
        	//重置文本框的值
        	$('#type').combobox('clear');
        	reloadTable();
        });
      	//返回按钮
   	    $('#goBack').on('click',backMain);
        
       createTable();
       $("#save").on('click',submitEdit);
       //蒙版关闭
       $("#backBtn").on('click',function(){
    	   $(".maskback").hide();
       });
         //编辑
        $('#t-wrap').on('click', 'a[data-permit="${name_english}:editTime"]', function() {
        	var $this = $(this),
        	    id = $this.closest('tr').find('td[data-field="id"]').attr('data-value');
        	$.ajax({
        		url : CONST_URL.INIT_TIME_EDIT,
          	   data:{"id":id},
          	   success:function(data){
               	console.log(data);
               	reloadTable();  
               	$("#startTimef").val(data.data.startTime);
           		$("#endTimef").val(data.data.endTime);
           		$("#typef").val(data.data.type);
           		//$("#videoUrlf").val(data.data.videoUrl);
           		
           		if(data.data.type == "video"){
           			$("#video").show();
           		}else{
           			$("#video").hide();
           		}
           		$("#ID").val(data.data.id);
           		var type = data.data.type;
           		$('#typef').combobox({
           			defaultValue:data.data.type,
           			async:false,
                       valueField : 'code',
                       textField : 'name',
                       url : COMMON_URL.getCode + '?type=T_DM_T_YWYM_TIMER_TYPE',
                       onSelect : function (record){
                       	if("video" == record.code){
                       		$("#video").show();
                       	}
                       	if("goods" == record.code){
                       		$("#video").hide();
                       	}
                       }
               	});
           		$("#videoUrlf").filePlugin();

           		//初始化自定义时间控件
               	laydate.render({
               		elem: '#startTimef',
               		type: 'time'
               	});
               	laydate.render({ 
           	        elem: '#endTimef',
           	        type: 'time'
           	    });
               	
           		$(".maskback").show();
               
          	   }
             });
        	
        	//$("#maskback").show();
        });
        //删除
		$('#delTime').on('click', function() {
			var $this = $(this),
			    id = $("input[name='id']:checked").serialize();
			$.sdialog({
				type: 'confirm',
				msg: '您确定要删除选中的记录吗?',
				onConfirm: function(result) {
				    if (result) {
				    	$.sajax({
			                url : CONST_URL.DEL_TIME + "?id=" + id,
			                onLoadSuccess : function() {
			                	 $.stip({
                	                type:'ok',//显示类型 有info、 ok、 danger
                	                text: '删除成功！'    
			                	});
			                	reloadTable();  
			                }
			            });
				    		
				    }	
				}
			});
		});
        
    });
    
    //提交编辑
    function submitEdit(){
    	$("#form").form({
       	 buttons : ['#saveBtn'],
            ajax: {
                url: CONST_URL.EDIT_TIME
            },
            onSubmitSuccess: function (data) {
            	console.log(data);
            	if(data.msg != "null"){
            		alert(data.msg);
            	}else{
            		$.stip({
      	                type:'ok',//显示类型 有info、 ok、 danger
      	                text: '保存成功！',
      	                onBeforeHide: function () {
      	                	$(".maskback").hide();
      	                	backMain();
      	                }
               	 });
            	}
             }
        }).form("submit");
    }
    // 重新加载表格
	function reloadTable() {
		$('#dataList').datagrid('reload',{
            ajax: {
            	param: {
            		"type":$('#type').combobox('getValue'),
					"userId": trimSpace($('#userId').val())
            	}
            }
        });
	}
    
    //创建表格
    function createTable() {
    	$('#dataList').datagrid({
    		ajax: {
    			url: CONST_URL.GET_TIME,
    			param: {
    				"type":$('#type').combobox('getValue'),
    				"userId": trimSpace($('#userId').val())
            	}
    		},
    		columns: [
    		    {
    		    	field:'id',
    		    	hidden:true
    		    },
    			{
    		    	 render : function(rowData){
							return '<input type="checkbox" id="id" name="id" value="'+rowData.id+'">';
						}
    		     },
    		     {
    		    	 field: 'type'
    		     },
    		     {
    		    	 field:'startTime'
    		     },
    		     {
    		    	 field: 'endTime'
    		     },
    		     {
    		    	 field: 'videoUrl'
    		     },
    		     {
    		    	 render: function (rowData) {
    		    		 return $.funcbar({
    		    			 data: permission,    //请求的数据
    		    			 type: 'text',     //类型
    		    			 display: 1,    //显示数量
    		    			 permit: ['${name_english}:editTime'] //需要的权限按钮
    		    		 });
    		    	 }
    		     }
    	    ]
    	});
    }
    
    //勾选全部
    function checkAll(){
		 $("[name='id']").attr("checked",'true');//全选 
	}
  //返回主页面
    function backMain() {
    	window.location.href = CONST_URL.INIT_MAIN;
    }
   
   
</script>
</body>
</html>